<!--  -->
<template>
  <div class="edit-container-custom" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" ref="settingDialog">
      <div class="edit-container-u">
        <el-row>
          <el-col :span="12">
            <PaddingTop :title="'顶部内间距'" :defValue="formConfig.paddingTop" :chgValue="(d)=>{formConfig.paddingTop = d}" />
          </el-col>
          <el-col :span="12">
            <PaddingBottom :title="'底部内间距'" :defValue="formConfig.paddingBottom" :chgValue="(d)=>{formConfig.paddingBottom = d}" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <PaddingLeft :defValue="formConfig.paddingLeft" :chgValue="(d)=>{formConfig.paddingLeft = d}" />
          </el-col>
          <el-col :span="12">
            <PaddingRight :defValue="formConfig.paddingRight" :chgValue="(d)=>{formConfig.paddingRight = d}" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form @submit.native.prevent>
              <el-form-item label="宽度" :label-width="formLabelWidth" style="margin-bottom: 0px;">
                <el-input @blur="widthBlur" size="mini" style="width:120px;" v-model="formConfig.width" maxlength="12"
                  placeholder="头部容器宽度"></el-input>
                <span style="color: #409EFF;font-size: 12px;">注意：需要固定宽度有效显示头部区域内容 </span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import PaddingLeft from '@/components/common/design/dialog/component/formitem/PaddingLeft.vue'
import PaddingRight from '@/components/common/design/dialog/component/formitem/PaddingRight.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
// import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    // 添加栅格
    VueFunctions.method(WindowType.EDIT_CONTAINER_CONTAINERCUSTOM, (containerData) => {
      this.close()
      this.dialogShow = true
      this.containerData = containerData
      this.data = containerData.render.data

      this.formConfig = Object.assign({}, this.formConfig, JSON.parse(JSON.stringify(this.data.config)))

      this.$nextTick(() => {
        this.$refs['settingDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      name: '头部容器设置',
      containerData: null,
      data: null,
      formLabelWidth: '120px',
      // 控制
      formConfig: {
        paddingTop: '',
        paddingBottom: '',
        paddingLeft: '',
        paddingRight: '',
        width: ''
      },
      callback: () => { }
    }
  },
  watch: {
  },
  methods: {
    widthBlur () {
      if (/^-?(\d|\.)+$/.test(this.formConfig.width)) {
        this.formConfig.width = this.formConfig.width + 'px'
      }
    },
    close () {
      this.dialogShow = false
      this.containerData = null
      this.data = null
      this.boolPaddingTop = false
      this.boolPaddingBottom = false
      this.boolPaddingLeft = false
      this.boolPaddingRight = false
      this.formConfig = {
        paddingTop: '',
        paddingBottom: '',
        paddingLeft: '',
        paddingRight: '',
        width: ''
      }
    },
    saveclose () {
      this.data.config = _.cloneDeep(this.formConfig)
      this.containerData.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.setCustomContainerCustom(this.containerData)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    PaddingLeft,
    PaddingRight
  }
}

</script>
<style scoped lang="scss">
.edit-container-u {
  width: 840px;
}
</style>
